<template>
  <!-- 账户变动审核 -->
  <div class="accountChange">
    <!-- 日历选择器 -->
    <div class="block">

      <el-date-picker v-model="value2" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" @change="changeTime" />

    </div>

    <!-- 选择类型下拉框选择器 -->
    <el-select v-model="valueType" clearable placeholder="请选择类型" @change="queryForm.applyType = valueType" @clear="queryForm.applyType = null">
      <el-option v-for="item in optionsType" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>

    <!-- 选择状态下拉框选择器 -->
    <el-select v-model="valueStatus" clearable placeholder="请选择状态" @change="queryForm.status = valueStatus" @clear="queryForm.status = null">
      <el-option v-for="item in optionsStatus" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>

    <!-- 申请人编号 -->
    <el-input v-model="userId" clearable placeholder="申请人编号" />

    <!-- 查询按钮 -->
    <el-button type="primary" @click="findAllByPageAndPageSize">查询</el-button>

    <!-- 表格 -->
    <el-table :data="tableData" stripe style="width: 100%" :default-sort="{prop:'id'}">
      <el-table-column prop="id" label="序号" />
      <el-table-column prop="userId" label="申请人编号" />

      <el-table-column prop="applyTime" :formatter="formatter" label="申请时间" />

      <el-table-column prop="applyType" label="变更类型" />

      <el-table-column prop="money" label="变更资金">
        <template slot-scope="scope">
          ￥<span style="color:red;font-size:20px;">{{ scope.row.money }}</span>元
        </template>
      </el-table-column>

      <el-table-column prop="reson" label="变更原因" />

      <el-table-column prop="status" label="状态" clearable>
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === '未审核' ? 'info' : (scope.row.status === '通过' ? 'success' : 'danger')" disable-transitions>{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <div v-show="scope.row.status === '未审核'">
            <el-link type="primary" :underline="false" @click="acCheckPass(scope.row.id)">通过</el-link>
            <el-link type="danger" :underline="false" @click="acCheckNoPass(scope.row.id)">不通过</el-link>
          </div>
        </template>
      </el-table-column>

    </el-table>

    <!-- 分页 -->
    <el-pagination :current-page="queryForm.page" :page-sizes="[2,5,10,15,20]" :page-size="queryForm.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalData" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

  </div>
</template>

<script>
import { pageQuery, checkPass, checkNoPass } from '../../../api/examine/accountApply'
import moment from 'moment'
export default {
  data() {
    return {
      /**
        * 日历选择
        */
      value2: '',
      pickerOptions: {

        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      queryForm: {
        page: 1,
        pageSize: 10
      },

      /**
         * 选择类型下拉框
         */
      optionsType: [
        {
          value: '充值',
          label: '充值'
        }, {
          value: '提现',
          label: '提现'
        }
      ],
      valueType: '',

      /**
         * 选择状态下拉框
         */
      optionsStatus: [
        {
          value: '通过',
          label: '通过'
        }, {
          value: '不通过',
          label: '不通过'
        }, {
          value: '未审核',
          label: '未审核'
        }
      ],
      valueStatus: '',

      /**
         * 申请人编号
         */
      userId: '',

      /**
         * 表格数据
         */
      tableData: [],

      /**
         * 分页相关数据
         */
      totalData: 0 // 总页数

    }
  },
  computed: {},
  created() {
    this.findAllByPageAndPageSize()
  },

  mounted() { },
  methods: {

    /**
       * 审核通过
       */
    async acCheckPass(id) {
      const { status, message } = await checkPass(id)
      if (status == 200 || status == '200') {
        this.findAllByPageAndPageSize()
        this.$message.success(message)
      } else {
        this.$message.error(message)
      }
    },

    /**
       * 审核不通过
       */
    async acCheckNoPass(id) {
      const { status, message } = await checkNoPass(id)
      if (status == 200 || status == '200') {
        this.findAllByPageAndPageSize()
        this.$message.success(message)
      } else {
        this.$message.error(message)
      }
    },

    /**
       * 日历改变方法
       */
    changeTime(time) {
      this.queryForm.beginTime = time == null ? '' : Number(time[0])
      this.queryForm.endTime = time == null ? '' : Number(time[1])
    },

    /**
       * 表格格式化方法
       */
    formatter(row, clo) {
      return moment(row.applyTime).format('YYYY-MM-HH')
    },
    /**
       * 分页的方法
       */
    async handleSizeChange(val) { // 每页条数改变
      this.queryForm.pageSize = val
      this.findAllByPageAndPageSize()
    },
    async handleCurrentChange(val) { // 当前页改变
      this.queryForm.page = val
      this.findAllByPageAndPageSize()
    },
    async findAllByPageAndPageSize() {
      for (const key in this.queryForm) {
        if (this.queryForm[key] == null || this.queryForm[key] == '') this.queryForm[key] = null
      }
      const { data } = await pageQuery(this.queryForm)
      this.tableData = data.list
      this.totalData = data.total
    }

  }
}
</script>
<style scoped>
  .block,
  .el-select,
  .el-input,
  .el-button {
    float: left;
    margin: 0 10px;
  }
  .el-input {
    width: 200px;
  }
  .el-pagination {
    margin: 10px;
    float: right;
  }
</style>
